<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    	function showChart() { // 准备每秒执行，动态新增统计数据，然后监听器除去rt结尾的请求就能准确统计
    		$.ajax({
       			url:"./rt",
       			type:"get",
       			dataType:"json",
       			success: function(json) {
       				console.log(json.timeList);
       				console.log(json.valueList);
       				
       			// 基于准备好的dom，初始化echarts实例
       		        var myChart = echarts.init(document.getElementById('main'));

       		        // 指定图表的配置项和数据
       		        var option = {
       		            title: {
       		                text: '请求流量分析统计'
       		            },
       		            tooltip: {},
       		            legend: {
       		                data:['访问量'] // 这个data要和series的name对应
       		            },
       		            xAxis: { // 横轴是时间
       		                data: json.timeList
       		            },
       		            yAxis: {},
       		            series: [{
       		                name: '访问量',
       		                type: 'line', // bar柱状图，line折线图
       		                data: json.valueList
       		            }]
       		        };

       		        // 使用刚指定的配置项和数据显示图表。
       		        myChart.setOption(option);
       			}
       		})
    	}
    	setInterval(showChart, 1000);
    </script>
</body>
</html>